<template>
	<view>
		<view class="chapter" >
			<uni-collapse accordion>
				<!-- 书籍章节列表 -->
				<uni-collapse-item class="chapterList" v-for="item in chapter" :key="item.id" :title="item.title">
					<template v-for="voc_item in bookVocList">
						<view class="voc" v-if="voc_item.chapter_id===item.id" :key="voc_item.id">
							<uni-icons type="circle" size="20"></uni-icons>
							<view class="voc-spelling">{{voc_item.spelling}} </view>
						</view>
					</template>

				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 书籍章节
				chapter: [],
				book_id: '',
				book_name: '',
				wh: 0,
				bookVocList: [],
			};
		},
		onLoad(options) {
			this.book_id = options.book_id || '4'
			this.book_name = options.book_name || ''
			// 更改标题
			uni.setNavigationBarTitle({
				title: this.book_name
			})
			this.getBookChaper();
			this.getBookVocList(this.book_id);
			const sysInfo = uni.getSystemInfoSync();
			this.wh = sysInfo.windowHeight;
		},
		methods: {
			// 获取书籍章节
			async getBookChaper() {
				const {
					data: chapterData
				} = await uni.$http.get("/api/book/chapter?book_id=" + this.book_id);
				this.chapter = await chapterData.data
			},
			// 获取书本单词
			async getBookVocList(book_id) {
				const {
					data: bookVocListData
				} = await uni.$http.get("/api/book/voc?book_id=" + book_id);
				this.bookVocList = await bookVocListData.data
			},
		}	
	}
</script>

<style lang="scss">
.chapter{
	background: rgb(240, 240, 240);
	.chapterList {
		.voc {
			display: flex;
			width: 100%;
			height: 100%;
			padding: 10px 40rpx;
			background: rgb(240, 240, 240);
			margin: 0 10rpx;
			.voc-spelling{
				font-size: 15px;
				padding-left: 10px;
			}
			
		}
	}
}
</style>
